<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="./CSS/demo.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/c/font_4624650_xnxzqhc3aw.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <nav>
        <div>
            <div class="logo"><a href=""><img alt="" src="./images/picture/logo-dark.png"></a></div>
            <div @click.stop="show_lists" class="btn_nav"></div>
            <ul class="nav">
                <li @click.stop="navs.list ? show_list(index) : ''" v-for="(navs, index) in navs">
                    <a>{{navs.title}}<i class="iconfont icon-sanjiao" v-if="navs.list"></i></a>
                    <ul :class="'nav_child_' + index" class="nav_child" style="display: none">
                        <li v-for="nav in navs.list"><a href="">{{nav}}</a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </nav>
    <section class="section1">
        <div>
            <div class="content">
                <div></div>
                <div>
                    <h1>{{section1.title}}</h1>
                    <h5 v-for="text in section1.content">{{text}}</h5>
                </div>
            </div>
        </div>
    </section>
    <section class="section2">
        <div>
            <div>
                <ul class="nav">
                    <li v-for="nav in section2_nav">
                        <a href="">{{nav}}</a>
                    </li>
                </ul>
                <p>
                    Check out our portfolio to see some of our recent work. you can see more awesome stuff also. unknown
                    printer <br>
                    took a galley of type scrambled it to make a type specimen book. It has survived not only...
                </p>
            </div>
            <div>
                <ul class="main_img">
                    <li v-for="imgs in section2">
                        <a href="">
                            <img :src="imgs.src" alt="">
                            <div>
                                <p><a href="">{{imgs.title}}</a></p>
                                <p><a href="">{{imgs.name}}</a></p>
                            </div>
                        </a>
                    </li>
                </ul>
                <div>
                    <a href="">KNOW MORE</a>
                </div>
            </div>
        </div>

    </section>
    <section class="section3">
        <div>
            <ul class="youShang_logo">
                <li v-for="img in youShang_logo"><img :src="img.src" alt=""></li>
            </ul>

        </div>
    </section>

    <footer>
        <div>
            <div class="footer_left">
                <div class="logo"><a href=""><img alt="" src="./images/picture/logo-dark.png"></a></div>
                <h5>3358 Dovetail Estates</h5>
                <p>When an unknown printer took a galley of type <br>scrambled it to make a type book.</p>
                <h4>+1234-5678-90</h4>
            </div>
            <div class="footer_right">
                <ul>
                    <li class="footer_nav" v-for="list in footer_nav">
                        <h4>{{list.title}}</h4>
                        <ul>
                            <li v-for="val in list.nav">
                                <a href=""><i class="iconfont icon-youjiantou1"></i>{{val}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
    <div class="footer-alt">
        <div>
            <div class="lift">© Joltix-2021 Design By <span>17sucai</span></div>
            <div class="right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

    </div>
</div>


<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                bool_click: false, //是否发生了点击事件
                bool_win_min: document.querySelector('body').offsetWidth <= 991, // 屏幕宽度是否小于576

                navs: [
                    {id: 1, title: 'Home'},
                    {id: 1, title: 'About'},
                    {id: 1, title: 'Services'},
                    {
                        id: 1,
                        title: 'Shop',
                        list: ['Products', 'Product-list', 'Product', 'Details', 'Checkout', 'Cart']
                    },
                    {id: 1, title: 'Portfolio', list: ['Work', 'Work Detail']},
                    {id: 1, title: 'Blog', list: ['Blog Listing', 'Blog Grid', 'Single Post']},
                    {id: 1, title: 'Contact'},
                ],
                section1: {
                    title: 'News & Stories',
                    content: ['Founded and based in Spain,we are Eagle,a design and branding agency', 'with partners worldwide.']
                },
                section2_nav: ['All', 'Branding', 'Designing', 'Photography', 'Development'],
                section2: [
                    {id: 1, src: './images/picture/img1.jpg', title: 'Iphone mockup', name: 'Branding'},
                    {id: 1, src: './images/picture/img2.jpg', title: 'Mockup Collection', name: 'Mockup'},
                    {id: 1, src: './images/picture/img3.jpg', title: 'Abstract images', name: 'Abstract'},
                    {id: 1, src: './images/picture/img4.jpg', title: 'Yellow bg with Books', name: 'Books'},
                    {id: 1, src: './images/picture/img5.jpg', title: 'Company V-card', name: 'V-card'},
                    {id: 1, src: './images/picture/img6.jpg', title: 'Mockup box with paints', name: 'Photography'},
                    {id: 1, src: './images/picture/img7.jpg', title: 'Coffee cup', name: 'Cups'},
                    {id: 1, src: './images/picture/img8.jpg', title: 'Yellow bg with Books', name: 'Books'},
                    {id: 1, src: './images/picture/img9.jpg', title: 'Pen and article', name: 'Article'},
                    {id: 1, src: './images/picture/img1.jpg', title: 'Yellow bg with Books', name: 'Books'},
                    {id: 1, src: './images/picture/img2.jpg', title: 'Iphone mockup', name: 'Branding'},
                    {id: 1, src: './images/picture/img4.jpg', title: 'Yellow bg with Books', name: 'Books'}
                ],
                youShang_logo: [
                    {id: 1, src: './images/picture/brand-1.png', name: ''},
                    {id: 1, src: './images/picture/brand-2.png', name: ''},
                    {id: 1, src: './images/picture/brand-3.png', name: ''},
                    {id: 1, src: './images/picture/brand-4.png', name: ''},
                ],
                footer_nav: [
                    {
                        title: 'Company',
                        nav: ['Home', 'How It Works', 'Our Mission', 'Privacy Policy', 'Contact Us']
                    },
                    {
                        title: 'Products',
                        nav: ['Health', 'Insurance', 'Travel', 'Photography', 'Technology']
                    },
                ]
            }
        },
        methods: {
            show_list(index) {
                let ele = document.getElementsByClassName('nav_child_' + index)[0]
                let noBox = document.getElementsByClassName('nav_child')

                if (ele.style.display === 'block') {
                    ele.style.display = 'none'
                    return
                }
                for (let i = 0; i < noBox.length; i++) {
                    noBox[i].style.display = 'none'
                }
                ele.style.display = 'block'


            },
            show_lists() {
                let lists = document.getElementsByClassName('nav')[0]
                if (lists.style.height === 'auto') {
                    lists.style.height = '0'
                    return
                }
                lists.style.height = '270px'

                setTimeout(() => {
                    lists.style.height = 'auto'
                }, 3000)


            }
        },
        mounted() {
            let that = this;
            window.onclick = function () {
                let ele = document.querySelectorAll('.nav_child')
                for (let i = 0; i < ele.length; i++)
                    ele[i].style.display = 'none'
                let lists = document.getElementsByClassName('nav')[0]
                lists.style.height = '0'
            }
            window.onresize = () => {
                that.bool_win_min = document.querySelector('body').offsetWidth <= 991;
            }
        }
    })
</script>

</body>
</html>